<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大涛讲堂-Vue尝鲜demo4</title>
		<style>
			h1{
				text-align: center;
			}
			table,
			td,
			th {
				border-collapse: collapse;
				border-spacing: 0
			}
			
			table {
				width: 400px;
				margin: 0 auto;
				text-align: center;
			}
			
			td,
			th {
				border: 1px solid #bcbcbc;
				padding: 5px 10px;
			}
			
			th {
				background: #42b983;
				font-size: 1.2rem;
				font-weight: 400;
				color: #fff;
				cursor: pointer;
			}
			
			tr:nth-of-type(odd) {
				background: #fff;
			}
			
			tr:nth-of-type(even) {
				background: #eee;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>图书电商数据</h1>
			<table>
				<thead>
					<tr>
						<th>ID</th>
						<th>分类</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="list in result">
						<td>{{list.id}}</td>
						<td>{{list.catalog}}</td>
					</tr>
				</tbody>
				
			</table>
			
		
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',//
				data:{
					"resultcode":"200",
					"reason":"success",
					"result":[
						{
							"id":"242",
							"catalog":"中国文学"
						},
						{
							"id":"252",
							"catalog":"人物传记"
						},
						{
							"id":"244",
							"catalog":"儿童文学"
						},
						{
							"id":"248",
							"catalog":"历史"
						},
						{
							"id":"257",
							"catalog":"哲学"
						},
						{
							"id":"243",
							"catalog":"外国文学"
						},
						{
							"id":"247",
							"catalog":"小说"
						},
						{
							"id":"251",
							"catalog":"心灵鸡汤"
						},
						{
							"id":"253",
							"catalog":"心理学"
						},
						{
							"id":"250",
							"catalog":"成功励志"
						},
						{
							"id":"249",
							"catalog":"教育"
						},
						{
							"id":"245",
							"catalog":"散文"
						},
						{
							"id":"256",
							"catalog":"理财"
						},
						{
							"id":"254",
							"catalog":"管理"
						},
						{
							"id":"246",
							"catalog":"经典名著"
						},
						{
							"id":"255",
							"catalog":"经济"
						},
						{
							"id":"258",
							"catalog":"计算机"
						}
					],
					"error_code":0
				}
			});
		</script>
	</body>
</html>
